<template>

  <div class="index">

  
  <el-row class="one" :gutter="5">
    <el-col :span="16"><div class="grid-content ep-bg-purple-dark" >
        <el-card class="box-card" shadow="hover">
          <template #header>
           <div class="card-header">
            <span>待处理订单</span>
            <span><a href="javascript:;">处理订单></a></span>
           </div>
          </template>
            <div class="ul">
          <li>
            <div class="num">0</div>
            <div class="txt">新订单</div>
          </li>
          <li>
            <div class="num">0</div>
            <div class="txt">异常订单</div>
          </li>
          <li>
            <div class="num">0</div>
            <div class="txt">催单</div>
          </li>
          <li class="tui">
            <div class="num">0</div>
            <div class="txt" >退单</div>
          </li>
            </div> 
        </el-card>
    </div></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-dark">
        <el-card class="box-card" shadow="hover">
          <template #header>
           <div class="card-header">
            <span>待处理反馈</span>
            <span><a href="javascript:;">顾客评价></a></span>
           </div>
          </template>
          <div class="forback">
             <li>
               <div class="badnumber">1</div>
               <div class="badcom">未回复差评</div>
             </li>
             <li id="rightcom">
               <div class="badnumber">1</div>
               <div class="badcom">未回复评价</div>
             </li>
          </div>
        </el-card>
    </div></el-col>
  </el-row>

  <el-row class="two" :gutter="5">
    <el-col :span="16"><div class="grid-content ep-bg-purple">
        <el-card class="box-card" shadow="hover">
          <template #header>
           <div class="card-header">
            <span>今日总览</span>
            <span><a href="javascript:;">数据中心></a></span>
           </div>
          </template>
            <div class="order">
               <li>
                 <div class="order-title">订单</div>
                 <div class="order-num">0</div>
                 <div class="order-desc">昨日4单</div>
               </li>
               <li>
                 <div class="order-title">营业额</div>
                 <div class="order-num">0.00</div>
                 <div class="order-desc">昨日208.00</div>
               </li>
            </div>
        </el-card>
    </div></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light">
        <el-card class="box-card" shadow="hover">
          <template #header>
           <div class="card-header">
            <span>活动</span>
            <span><a href="javascript:;">平台活动></a></span>
           </div>
          </template>
          <div class="activity">
            <li>
              <div class="activity-title">已报名</div>
              <div class="activity-num">12</div>
              <div class="activity-alive">进行中(3)</div>
            </li>
            <li>
              <div  class="activity-title">未报名</div>
              <div class="activity-num">3</div>
            </li>
          </div>
        </el-card>
    </div></el-col>
  </el-row>

  <el-row class="three" :gutter="5">
    <el-col :span="24"><div class="grid-content ep-bg-purple">
        <el-card class="box-card3" shadow="hover">
          <template #header>
           <div class="card-header">
            <span>任务中心</span>
            <span><a href="javascript:;">门店信息></a></span>
           </div>
          </template>
          <div id="renwu" style="margin-left: 120px;float: left;">
            <img src="../../public/img/youxiu.png" alt="">
          </div>
          <div class="list">
             <li v-for="(item,index) in list" :key="index">
              <el-icon><Select /></el-icon>
               {{ item }}
               <el-button class="setting">设置</el-button>
             </li>
          </div>
        </el-card>
    </div></el-col>
  
  </el-row>


</div>
</template>

<script setup lang="ts">
  import {ref} from 'vue'
  //任务列表
  const list =ref([
     "菜品数量多于10个-------------------------------------------------------------------------------------------",
     "营业时间不为空----------------------------------------------------------------------------------------------",
     "有自己上传的logo----------------------------------------------------------------------------------------",
     "已通过营业执照认证---------------------------------------------------------------------------------------",
     "起送价<=50元-------------------------------------------------------------------------------------------------",
     "配送费<=10元--------------------------------------------------------------------------------------------"
  ])


</script>

<style lang="less" scoped>

        
li{
        list-style: none;
      }  

.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.index{
    background-color: rgb(244, 244, 239);
}

.one{
    height: 160px;
   
    // .ul{
    //     width: 1000px;
    //     height: 100px;
    //     display: flex;
    //     justify-content: space-around;

    // }

   li{
     list-style: none;
     float: left;
     width: 180px;
     height: 100px;
     background-color: rgb(255, 255, 255);
     margin-right: 10px;
     text-align: center;
     font-size:10px;
     border-right: 3px dashed rgb(204, 201, 201);
     .num{
        font-size: 50px;
        font-weight: 700;
        color: rgb(196, 196, 190);
        line-height: 70px;
     }
     .txt{
        font-size: 15px;
        color: rgb(175, 173, 173);
        line-height: 20px;
     }
     
   }
.tui{
        border-right: none;
     }
}
.two{
    height: 160px;
   
}
.three{
    height: 260px;
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  a{
    text-decoration: none;
    color: rgb(122, 116, 116);
  }
  a:hover{
    color:black
  }
}
.box-card{
    height: 200px
}
.box-card3{
    height: 270px;
}

//差评范围
.forback{
  li{
    width: 170px;
    height: 200px;
    float: left;
    border-right: 3px dashed black;

    text-align: center;
  
  }
  .badnumber{
    font-size: 35px;
    font-weight: 700;
    line-height: 60px;
    color: rgb(234, 120, 34);
  }
  .badcom{
    color: rgb(134, 139, 137);
    font-size: 10px;
    line-height: 10px;
  }
  #rightcom{
    border-right: none;
  }
}

//订单营业额范围
.order{
  text-align: center;
  li{
    float: left;
    text-align: center;
    width:350px;
    height: 200px;
  }
  .order-title{
    color: black;
    font-size: 10px;
  }
  .order-num{
    color: rgb(195, 193, 193);
    font-size: 30px;
    font-weight: 700;
    line-height: 50px;
  }
  .order-desc{
    color:black;
    font-size: 10px;
  }
}

//活动区域
.activity{
  text-align: center;
  li{
    width: 180px;
    height: 100px;
    float: left;
  }
  .activity-num{
    font-size: 30px;
    font-weight: 700;
    color: black;
  }
  .activity-title{
    color: rgb(157, 151, 151);
    font-weight: 700;
  }
}

//任务范围
.list{
  float: left;
  li{
    margin-left: 100px;
    margin-bottom: 10px;
  }
  .setting{
     position: absolute;
     right: 30px;
     height: 25px;
  }
}
</style>